<template>
<div class="form">
	  <h1>添加专辑</h1>
		<form action="" method="" @submit.prevent="doSubmit">
			<div class="form-line">
				<label for="title">专辑名称</label>
				<input type="text" id="title" v-model="data.title" class="input"/>
			</div>
			<div class="form-line">
				<label for="author">歌手名称</label>
				<input type="text" id="author" v-model="data.author" class="input"/>
			</div>
			<div class="form-line">
				<label for="tags">专题标签</label>
				<input type="text" id="tags" v-model="data.tags" class="input"/>
			</div>
			<div class="form-line">
				<label for="summary">播放地址</label>
				<input type="text" id="summary" v-model="data.summary" class="input"/>
			</div>
			<div class="form-line">
				<label for="image">专辑封面</label>
				<input type="text" id="image" v-model="data.image" class="input"/>
			</div>
			<div class="form-line">
				<label>专题星评</label>
				<van-rate v-model="rateValue" />
			</div>
			<button class="btn">提交</button>
		</form>
	</div>
  
</template>
<script>
import {fetchAllMusic, addMusic} from "@/api/music.js"
import {reactive, ref} from 'vue'
import {onMounted} from 'vue'

export default {
  name: 'Admin',
  components: {
  },
  setup(){
    const data = reactive({
         title:'',
		 author:'',
		 tags:"",
		 summary:"",
		 image:""
    });
	const rateValue = ref(3);
	
    onMounted( () => {
      getAllMusic()
    });
	
	function doSubmit(){
		addMusic({
			title: data.title,
			author: data.author,
			tags: data.tags,
			summary: data.summary,
			image: data.image,
			rating: rateValue.value
			
		});
		alert("成功")
		clearInput();
	}
	
	function clearInput(){
		  data.title = '',
		  data.author = '',
		  data.tags = "",
		  data.summary = "",
		  data.image = ""
	}
	return {data, rateValue, doSubmit}
  }
}

async function getAllMusic(){
    let movies = []
    await fetchAllMusic().then(
        function (res){
            movies = res;
			console.log(res);
        }
    )
    return movies
}


</script>

<style>
	.form{
		margin:0 auto;
		text-align:center;
	}
	.input{
		background-color: #CACACA;
		
	}
	.form-line{
		margin-top: 5px;
	}
	.btn{
		margin-top: 20px;
		background: #42B983;
		color: white;
		width: 50px;
		height: 30px;
	}
</style>
